<template>
  <div class="com-container">
    <div class="title">
      <span :style="{ fontSize: fsize / 1.2 + 'px' }">{{ title }}</span>
      <span class="iconfont title-icon" @click="showChoice = !showChoice"
        >&#xe6eb;</span
      >
      <div class="select-con" v-if="showChoice">
        <div
          class="select-item"
          v-for="item in selectTypes"
          :key="item.key"
          @click="handleSelect(item.key)"
        >
          {{ item.text }}
        </div>
      </div>
    </div>
    <div class="com-chart" ref="trend_ref">132</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // chart实例
      chartInstance: null,
      //   图标数据
      allData: null,
      //   半透明颜色值,每一组表示一个堆叠图的背景颜色
      colorArr1: [
        'rgb(128, 255, 165,.5)',
        'rgb(1, 191, 236,.5)',
        'rgb(55, 162, 255,.5)',
        'rgb(116, 21, 219,.5)',
        'rgb(255, 191, 0,.5)',
      ],
      // 全透明的颜色值
      colorArr2: [
        'rgb(1, 191, 236)',
        'rgb(77, 119, 255)',
        'rgb(116, 21, 219)',
        'rgb(135, 0, 157)',
        'rgb(224, 62, 76)',
      ],
      dataType: 'map', // 目前选择的数据类型, 可选 seller map,commodity
      //控制可选面板的显示
      showChoice: false,
      fsize: '',
    }
  },
  computed: {
    title() {
      if (!this.allData) {
        return ''
      } else return this.allData[this.dataType].title
    },
    // 计算dataType
    selectTypes() {
      if (!this.allData || !this.allData.type) {
        return []
      } else {
        return this.allData.type.filter((el) => el.key != this.dataType)
      }
    },
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapte)
    this.screenAdapte()
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.trend_ref, 'chalk')
    },
    async getData() {
      const { data: res } = await this.$http.get('/trend')
      this.allData = res
      this.updateChart()
    },
    updateChart() {
      // x轴
      const xMonths = this.allData.common.month
      //   y轴
      const yValues = this.allData[this.dataType].data
      //   图表数据
      const seriesArr = yValues.map((el, index) => {
        return {
          name: el.name,
          type: 'line',
          data: el.data,
          //   堆叠图
          stack: this.dataType,
          areaStyle: {
            opacity: 0.8,
            //   往下渐变
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: this.colorArr1[index],
              },
              {
                offset: 1,
                color: this.colorArr2[index],
              },
            ]),
          },
          emphasis: {
            focus: 'series',
          },
        }
      })
      //   图例数据
      const legendArr = yValues.map((el) => el.name)
      const option = {
        tooltip: {
          trigger: 'axis',
        },
        toolbox: {
          show: true,
          right: '20',
          top: '20',
          itemSize: 20,
          feature: {
            dataView: {
              readOnly: false,
            },
            saveAsImage: {},
          },
        },
        grid: {
          top: '30%',
          left: '3%',
          right: '4%',
          bottom: '1%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xMonths,
        },
        yAxis: {
          type: 'value',
        },
        legend: {
          data: legendArr,
          top: '10%',
          icon: 'circle',
          left: 20,
        },
        series: seriesArr,
      }
      this.chartInstance.setOption(option)
    },
    screenAdapte() {
      const titleFontSize = (this.$refs.trend_ref.offsetWidth / 100) * 3.6
      this.fsize = titleFontSize
      const adapterOption = {
        legend: {
          itemWidth: titleFontSize,
          itemHeight: titleFontSize,
          itemGap: titleFontSize,
          textStyle: {
            fontSize: titleFontSize / 2,
          },
        },
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    },
    handleSelect(key) {
      this.dataType = key
      this.updateChart()
      this.showChoice = false
    },
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapte)
  },
}
</script>

<style lang="less" scoped>
.title {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 10;
  color: white;
  .title-icon {
    margin-left: 10px;
    cursor: pointer;
  }
  .select-item {
    cursor: pointer;
  }
}
</style>
